<template>
    <!-- 管理员编辑课程 -->
    <div class="big-box">
        <div class="big-box-center">

            <div class="title">

                <!-- 修改封面 -->
                <div class="title-left" @click="onUploadImg()">
                    <el-tooltip effect="light" content="点击选择封面图片" placement="top">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar-uploader-icon" />
                        <el-icon v-else class="avatar-uploader-icon" style="width: 280px;height: 280px;">
                            <Plus style="width: 100px;height: 100px;" />
                        </el-icon>
                    </el-tooltip>
                </div>

                <div class="title-right">
                    <div class="title-text">
                        标题：
                        <n-input v-model:value="courseData.courseTitle" @blur="submitTitle(courseData.courseTitle)"
                            type="text" size="large" placeholder="标题" class="title-name" maxlength="30" show-count
                            clearable />
                    </div>
                    <!-- 分割线 -->
                    <n-divider title-placement="left" style="color: black;margin-top: 0px;margin-bottom: 5px;">
                        <img src="/src/assets/svg/api-app.svg">
                    </n-divider>
                    <span style="font-size: 15px;font-family: '幼圆';">最近更新时间:{{ courseData.updateTime }}</span>
                    <div class="xz-bj">
                        <span style="min-width: 105px;">课程班级:</span>
                        <n-select v-model:value="classIdArray" style="width: 100%" multiple :options="selectOptions"/>
                    </div>
                    <div>
                        <p style="font-size: 16px;margin-top: 10px;">简介：</p>
                        <n-input v-model:value="courseData.courseIntro" @blur="submitIntro(courseData.courseIntro)"
                            type="textarea" size="large" style="border-radius: 10px;" placeholder="简介" maxlength="150"
                            show-count clearable />
                    </div>
                </div>
            </div>

            <div class="list">
                <div class="list-top">
                    <span style="margin-left: 20px;font-size: 24px;">章节：</span>
                </div>
                <div class="list-data">
                    <VueDraggable v-model="courseList" animation="150" ghostClass="ghost" ref="el" @end="onEnd">
                        <div v-for="(item, index) in courseList" :key="index" class="list-item"
                            @dblclick="$router.push({ name: 'MdEditor', params: { chapterId: item.chapterId, courseId: courseId } })">
                            第 {{ index + 1 }} 章节 : {{ item.title }}
                            <div>
                                <img src="/src/assets/svg/delete1.svg" class="delete-img" @click="onDelete(item)">
                            </div>
                        </div>
                    </VueDraggable>
                    <div @click="addChapter" class="list-item-add">
                        <img class="add-img" src="/src/assets/svg/add-four.svg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import { VueDraggable } from 'vue-draggable-plus';
import { StarFilled } from "@element-plus/icons-vue";
import adminHttp from '@/api/adminHttp';
import { openInfo } from '@/utils/openInfo';
import { alterCourseCover } from '@/api/filesHttp';
import teacherHttp from '@/api/teacherHttp';
import useUserStore from '@/stores/useUserStore';
const userStore = useUserStore()
const props = defineProps(['courseId'])
const courseId = props.courseId
const courseData = ref({})
//选中的班级
const classIdArray = ref([])
//
const classInfo = ref([])
//班级选项
const selectOptions = computed(() => {
    return classInfo.value.map(item => ({
        label: item.className,
        value: item.classId
    }));
})
const courseList = ref([])

//添加章节 把章节加到数据库中在，添加名字
const addChapter = () => {
    //给该课程添加一个空白章节
    adminHttp.addChapter(courseId).then((res) => {
        if (res.code == 200) {
            getInitData()
        }
    })
}

//拖动结束后调用
const onEnd = (e) => {
    console.log(courseList.value);
    //构建提交对象
    const fromData = { courseId: courseId, courseChapter: courseList.value }
    //更新该课程列表数据
    adminHttp.changeOrder(fromData).then((res) => {
        if (res.code == 200) {
            getInitData()
        }
    })
}
//点击删除按钮删除
const onDelete = (item) => {
    //用课程id和章节id来删除
    adminHttp.deleteChapter(courseId, item.chapterId).then((res) => {
        if (res.code == 200) {
            getInitData()
        }
    })

}
//修改标题
const submitTitle = (courseTitle) => {
    if (courseTitle == "") {
        openInfo("修改失败！标题不可为空")
    } else {
        adminHttp.updateTitle(courseId, courseTitle).then((res) => {
            if (res.code == 200) {
                getInitData()
            }
        })
    }

}
//修改简介
const submitIntro = (courseIntro) => {
    if (courseIntro == "") {
        openInfo("修改失败！简介内容不可为空")
    } else {
        adminHttp.updateIntro(courseId, courseIntro).then((res) => {
            if (res.code == 200) {
                getInitData()
            }
        })
    }
}
//修改班级  
//通过监听班级数组的变化来实现
watch(classIdArray, (newValue, oldValue) => {
    if(newValue==""){
        openInfo("修改失败！至少要有一个课程的上课班级")
        classIdArray.value = oldValue;
    }else if(classIdArray.value != []){
        //console.log('新值:', newValue,'旧值:', oldValue);  
        teacherHttp.upDateClass(courseId,classIdArray.value).then((res)=>{
        })   
    }
});


//页面展示的图片
const imageUrl = ref('')
//图片url 用户选中的图片文件 可以不选择
const imgFile = ref('')
//点击选中图片

//图片上传
function onUploadImg() {
    const inputEl = document.createElement("input"); //创建input元素
    inputEl.type = "file"; //数据类型
    inputEl.accept = "image/*"; // 可以设置接受的文件类型，例如'*/*'表示任何类型
    inputEl.multiple = false; // 设置只能选择一个文件
    inputEl.click(); //点击元素
    inputEl.addEventListener("change", function () {
        //用户选中的文件
        imgFile.value = inputEl.files[0];
        const filesForm = new FormData();
        filesForm.append("file", imgFile.value);
        filesForm.append("courseId", courseId)
        alterCourseCover(filesForm).then((res) => {
            console.log(res);
            if (res.code == 200) {
                getInitData()
            }
        })

    })


}
onMounted(() => {
    getInitData()
    getClassList()
})

//根据课程Id 获取初始化的数据
const getInitData = () => {
    adminHttp.getCourseData(courseId).then((res) => {
        if (res.code == 200) {
            console.log("这是根据班级Id获取的所有数据",res.data);
            courseData.value = res.data
            //当前班级Id
            classIdArray.value = courseData.value.classIdList
            //章节列表数据
            courseList.value = courseData.value.chapterList
            //封面图片数据
            imageUrl.value = courseData.value.courseCover
            //时间去T
            courseData.value.updateTime = courseData.value.updateTime.replace("T", " ")
        }
    })
}

//获取该老师的班级信息
const getClassList = () => {
    teacherHttp.getClassList(userStore.userInfo.userId).then((res) => {
        if (res.code == 200) {
            classInfo.value = res.data
            console.log("班级", classInfo.value);
        }
    })
}


</script>

<style scoped>
.big-box {
    width: 100vw;
    height: 94vh;
    background-size: cover;
    /*覆盖 */
    display: flex;
    justify-content: center;
}

.big-box-center {
    min-width: 600px;
    width: 85%;
    padding: 15px;
    border-radius: 20px;
    margin-top: 20px;
    background-color: rgba(250, 249, 249, 0.6);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* 增加阴影 */
}

.title {
    height: 350px;
    display: flex;
}

.title-name {
    width: 400px;
}

.title-right {
    flex: 7;
    height: 100%;
    margin-left: 10px;
    border-radius: 10px;
    padding: 10px;
    background-color: rgba(237, 240, 242, 0.5);
}

.title-text {
    font-family: "楷体";
    font-style: italic;
    font-size: 25px;
    text-shadow: 20px 20px 50px #6c7d4f;
    margin-bottom: 10px;
}

.list {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.list-top {
    height: 50px;
    display: flex;
    align-items: center;
    border-top: 3px dotted rgb(236, 228, 228);
}

.list-data {
    height: 500px;
    overflow: auto;
}

.list-item {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px;
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    border: 1px rgb(179, 179, 179, 0.6) solid;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.4s ease-in-out, border 0.8s ease-in-out;
    text-indent: 2em;
    background-color: rgba(201, 248, 254, 0.1);
}

.ghost {
    opacity: 0.5;
    background: rgba(229, 255, 244, 0.8);
}

.list-item-add {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    border: 1px rgb(179, 179, 179, 0.6) solid;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.4s ease-in-out, border 0.8s ease-in-out;
    text-indent: 2em;
}

.list-item-add:hover {
    border: 1px rgb(62, 178, 0, 0.4) solid;
    background-color: rgba(211, 231, 222, 0.5);
}

.add-img {
    width: 50px;
    transition: width 0.3s ease;
}

.add-img:hover {
    width: 60px;
}

.submit-button {
    margin: 20px;
    display: flex;
    justify-content: flex-end;
}


.delete-img {
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
}

.delete-img:hover {
    transform: scale(1.4);
}

/* 弃用 */
.title-img {
    cursor: pointer;
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.title-left {
    flex: 2;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 修改图片框以及默认框的大小 */
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    padding: 10px;
    width: 100%;
    object-fit: cover;
    height: 100%;
    min-width: 280px;
    text-align: center;
    cursor: pointer;
    border-radius: 20px;
    border: 1px rgb(62, 164, 156, 0.2) solid;
    transition: border 0.3s ease;
}


.avatar-uploader-icon:hover {
    border: 3px rgb(62, 164, 156) solid;
}
</style>